<template>
	<view class="content">
		<view class="content-main">
			<text class="content-main-tlt">基本信息</text>
			<u--form labelPosition="left" ref="uForm" labelWidth="500rpx" :model="forms" :rules="rules">
				<u-form-item label="姓名" prop="name" labelPosition="top" required>
					<u--text
						text="请填写与您证件一致的真实姓名"
						color="#999"
						size="26rpx"
						block
						margin="8rpx 18rpx 0"
					></u--text>
					<u--input
						v-model="forms.name"
						placeholder="请填写真实姓名"
						border="none"
						clearable
					></u--input>
				</u-form-item>
				<u-form-item label="手机号码" prop="mobile" labelPosition="top" required>
					<u--text
						text="请填写手机号码用于接收重要赛事信息以及校验身份"
						color="#999"
						size="26rpx"
						block
						margin="8rpx 18rpx 0"
					></u--text>
					<u--input
						type="number"
						clearable
						v-model="forms.mobile"
						border="none"
						maxlength="11"
						placeholder="请填写手机号码"
					></u--input>
				</u-form-item>
				<u-form-item
					label="证件类型"
					prop="cid_name"
					labelPosition="top"
					@click="show = true"
					required
				>
					<u--input
						v-model="forms.cid_name"
						disabled
						placeholder="请选择"
						border="none"
						disabledColor="#eee"
					></u--input>
					<!-- <u-icon slot="right" name="arrow-right" color="#aaa"></u-icon> -->
				</u-form-item>
				<u-form-item label="证件号码" prop="cno" labelPosition="top" required>
					<u--input
						v-model="forms.cno"
						type="idcard"
						border="none"
						maxlength="18"
						placeholder="请输入正确的证件号码"
						@blur="cidToAge"
					></u--input>
				</u-form-item>
				<u-form-item
					label="性别"
					prop="sex_name"
					labelPosition="top"
					@click="showSex = true"
					required
				>
					<u--input
						v-model="forms.sex_name"
						disabled
						border="none"
						disabledColor="#eee"
						placeholder="必填，请与证件信息一致"
					></u--input>
				</u-form-item>
				<u-form-item
					label="选手类型"
					prop="type_name"
					labelPosition="top"
					@click="showtype = true"
					required
				>
					<u--input
						v-model="forms.type_name"
						disabled
						placeholder="请选择"
						border="none"
						disabledColor="#eee"
					></u--input>
				</u-form-item>
				<u-form-item
					label="国家/地区"
					prop="country"
					labelPosition="top"
					required
					@click="onCountryShow"
				>
					<u--input
						v-model="forms.country"
						disabled
						placeholder="请选择"
						border="none"
						disabledColor="#eee"
					></u--input>
				</u-form-item>
				<u-form-item label="年龄" prop="age" labelPosition="top" required>
					<u--input
						type="number"
						v-model="forms.age"
						border="none"
						placeholder="请填写"
						clearable
					></u--input>
				</u-form-item>
				<!--
				<u-form-item
					label="血型"
					prop="blood"
					labelPosition="top"
					required
					@click="showBlood = true"
				>
					<u--input
						v-model="forms.blood"
						disabled
						placeholder="请选择"
						border="none"
						disabledColor="#eee"
					></u--input>
				</u-form-item>
				-->
				<u-form-item
					label="出生日期"
					prop="born"
					labelPosition="top"
					required
					@click="showBirthday = true"
				>
					<u--input
						v-model="forms.born"
						disabled
						placeholder="请选择"
						border="none"
						disabledColor="#eee"
					></u--input>
				</u-form-item>
				<!--
				<u-form-item
					label="衣服尺码"
					prop="clothes"
					labelPosition="top"
					required
					@click="showClothes = true"
					v-if="!hiddenField.includes('clothes')"
				>
					<u--input
						v-model="forms.clothes"
						disabled
						placeholder="请选择"
						border="none"
						disabledColor="#eee"
					></u--input>
				</u-form-item>
				-->

				<!-- 自定义报名字段展示 -->
				<view v-for="item in customerFields" :key="item.id">
					<u-form-item
						:label="item.name"
						:prop="item.key"
						labelPosition="top"
						:required="item.isMust == 1"
					>
						<u--input
							v-if="item.type === 1"
							type="text"
							:value="forms[item.key]"
							@change="handleCustomerFieldsInputChange($event, item)"
							border="none"
							:placeholder="`请输入${item.name}`"
							clearable
						></u--input>
						<template v-else-if="item.type === 2">
							<picker
								@change="handleCustomerFieldsPickerChange($event, item.id)"
								:range="customerFieldsPicker[item.id]"
								:value="customerFieldsIndex[item.id]"
							>
								<u--input
									type="text"
									:value="forms[item.key]"
									border="none"
									:placeholder="`请选择${item.name}`"
									disabled
									disabledColor="#eee"
								></u--input>
								<view>{{}}</view>
							</picker>
						</template>
					</u-form-item>
				</view>

				<!-- 根据 isPalyerAddr 是否显示 -->
				<template v-if="isPalyerAddr != 0">
					<u-form-item
						label="居住地省份"
						prop="province"
						labelPosition="top"
						required
						@click="showProvince = true"
					>
						<u--input
							v-model="forms.province"
							disabled
							placeholder="请选择"
							border="none"
							disabledColor="#eee"
						></u--input>
					</u-form-item>
					<u-form-item
						label="居住地城市"
						prop="city"
						labelPosition="top"
						required
						@click="showCity = true"
					>
						<u--input
							v-model="forms.city"
							disabled
							placeholder="请选择"
							border="none"
							disabledColor="#eee"
						></u--input>
					</u-form-item>
					<u-form-item
						label="居住地区县"
						prop="region"
						labelPosition="top"
						required
						@click="showRegion = true"
					>
						<u--input
							v-model="forms.region"
							disabled
							placeholder="请选择"
							border="none"
							disabledColor="#eee"
						></u--input>
					</u-form-item>
					<u-form-item label="详细居住地址" prop="address" labelPosition="top" required>
						<u--input
							v-model="forms.address"
							border="none"
							placeholder="请填写"
							clearable
						></u--input>
					</u-form-item>
				</template>

				<!-- 根据 isContact 决定是否显示  -->
				<template v-if="isContact != 0">
					<u-form-item label="紧急联系人姓名" prop="contact" labelPosition="top" required>
						<u--input
							v-model="forms.contact"
							border="none"
							placeholder="请填写"
							clearable
						></u--input>
					</u-form-item>
					<u-form-item label="紧急联系电话" prop="telephone" labelPosition="top" required>
						<u--input
							v-model="forms.telephone"
							border="none"
							maxlength="11"
							placeholder="请填写紧急联系电话"
							type="number"
							clearable
						></u--input>
					</u-form-item>
				</template>

				<!-- 根据 forms.isFreeTrans 决定是否显示  -->
				<template v-if="forms.isFreeTrans != 0">
					<u-form-item
						label="是否需要城际摆渡车"
						prop="ferrybus_name"
						labelPosition="top"
						@click="showTrans = true"
						required
					>
						<u--input
							v-model="forms.ferrybus_name"
							disabled
							placeholder="请选择"
							border="none"
							disabledColor="#eee"
						></u--input>
					</u-form-item>
					<u-form-item label="可摆渡城市" prop="ferrybuscity" labelPosition="top">
						<u--input
							type="text"
							v-model="forms.ferrybuscity"
							border="none"
							placeholder="请填写"
							clearable
						></u--input>
					</u-form-item>
				</template>

				<!-- 根据 isPostAddr 决定是否显示 -->
				<template v-if="isPostAddr != 0">
					<u-form-item
						label="邮寄地址省份"
						prop="postProvince"
						labelPosition="top"
						@click="showPostProvince = true"
					>
						<u--input
							v-model="forms.postProvince"
							disabled
							placeholder="请选择"
							border="none"
							disabledColor="#eee"
						></u--input>
					</u-form-item>
					<u-form-item
						label="邮寄地址城市"
						prop="postCity"
						labelPosition="top"
						@click="showPostCity = true"
					>
						<u--input
							v-model="forms.postCity"
							disabled
							placeholder="请选择"
							border="none"
							disabledColor="#eee"
						></u--input>
					</u-form-item>
					<u-form-item
						label="邮寄地址区县"
						prop="postRegion"
						labelPosition="top"
						@click="showPostRegion = true"
					>
						<u--input
							v-model="forms.postRegion"
							disabled
							placeholder="请选择"
							border="none"
							disabledColor="#eee"
						></u--input>
					</u-form-item>
					<u-form-item label="邮寄地址" prop="postAddress" labelPosition="top">
						<u--input
							type="text"
							v-model="forms.postAddress"
							border="none"
							placeholder="请填写"
							clearable
						></u--input>
					</u-form-item>
					<u-form-item label="收件人姓名" prop="postName" labelPosition="top">
						<u--input
							type="text"
							v-model="forms.postName"
							border="none"
							placeholder="请填写"
							clearable
						></u--input>
					</u-form-item>
					<u-form-item label="收件人联系方式" prop="postTel" labelPosition="top">
						<u--input
							type="number"
							v-model="forms.postTel"
							border="none"
							maxlength="11"
							placeholder="请填写"
							clearable
						></u--input>
					</u-form-item>
				</template>
			</u--form>
		</view>
		<view class="content-main mode">
			<u-cell-group :border="false">
				<u-cell title="设置为本人" label="设置当前账号的使用者为本人" center :border="false">
					<u-switch slot="value" v-model="forms.checked"></u-switch>
				</u-cell>
			</u-cell-group>
		</view>
		<!-- <view class="content-main mode" style="padding-top: 36rpx">
			<u-checkbox-group v-model="forms.checkbox" iconPlacement="right" placement="row">
				<u-checkbox
					activeColor="#0071c5"
					label="阅读并同意以下内容"
					shape="circle"
					size="36rpx"
				></u-checkbox>
			</u-checkbox-group>
			<u-cell
				label="您已知晓您在野人体育录入的参赛人身份证信息，将用户报名马拉松等所有需要实名制的赛事产品，并在您保存时进行验证，请确保此信息真实有效。野人体育将通过加密等方式保护此信息。"
				:border="false"
			></u-cell>
		</view> -->
		<view class="footer">
			<button
				class="footer-btn"
				@click="onSubmit"
				:style="{ 'background-color': detailInfo.raceColor || '#0071c5' }"
			>
				完成
			</button>
		</view>

		<u-action-sheet
			:show="show"
			:actions="actions"
			title="请选择"
			@close="show = false"
			@select="cidSelect"
			round="14"
		></u-action-sheet>
		<!-- 可选项弹窗 -->
		<u-picker
			ref="country"
			title="选择国家/地区"
			confirmColor="#0071c5"
			keyName="cname"
			:show="showCountry"
			:defaultIndex="[defaultIndex]"
			:columns="actionsCountry"
			@confirm="countrySelect"
			@cancel="showCountry = false"
			v-if="showCountry"
		></u-picker>
		<u-picker
			ref="blood"
			title="选择血型"
			confirmColor="#0071c5"
			:show="showBlood"
			:columns="actionsBlood"
			@confirm="bloodComfirm"
			@cancel="showBlood = false"
		></u-picker>
		<u-datetime-picker
			ref="born"
			title="选择出生日期"
			confirmColor="#0071c5"
			:show="showBirthday"
			:value="birthday"
			mode="date"
			closeOnClickOverlay
			:minDate="minDate"
			@confirm="birthdayConfirm"
			@cancel="showBirthday = false"
			v-if="showBirthday"
		></u-datetime-picker>
		<u-picker
			ref="clothes"
			title="选择衣服尺码"
			confirmColor="#0071c5"
			:show="showClothes"
			:columns="actionsClothes"
			@confirm="clothesComfirm"
			@cancel="showClothes = false"
		></u-picker>
		<u-picker
			ref="province"
			title="选择居住地省份"
			confirmColor="#0071c5"
			:show="showProvince"
			keyName="name"
			:columns="actionsProvince"
			@confirm="provinceComfirm"
			@cancel="showProvince = false"
		></u-picker>
		<u-picker
			ref="city"
			title="选择居住地城市"
			confirmColor="#0071c5"
			:show="showCity"
			keyName="name"
			:columns="actionsCity"
			@confirm="cityComfirm"
			@cancel="showCity = false"
		></u-picker>
		<u-picker
			ref="region"
			title="选择居住地区县"
			confirmColor="#0071c5"
			:show="showRegion"
			keyName="name"
			:columns="actionsRegion"
			@confirm="regionComfirm"
			@cancel="showRegion = false"
		></u-picker>

		<u-picker
			ref="postProvince"
			title="选择邮寄地址省份"
			confirmColor="#0071c5"
			:show="showPostProvince"
			keyName="name"
			:columns="actionsProvince"
			@confirm="postProvinceComfirm"
			@cancel="showPostProvince = false"
		></u-picker>
		<u-picker
			ref="postCity"
			title="选择邮寄地址城市"
			confirmColor="#0071c5"
			:show="showPostCity"
			keyName="name"
			:columns="actionsPostCity"
			@confirm="postCityComfirm"
			@cancel="showPostCity = false"
		></u-picker>
		<u-picker
			ref="postRegion"
			title="选择居住地区县"
			confirmColor="#0071c5"
			:show="showPostRegion"
			keyName="name"
			:columns="actionsPostRegion"
			@confirm="postRegionComfirm"
			@cancel="showPostRegion = false"
		></u-picker>

		<u-action-sheet
			:show="showCid"
			:actions="actions"
			title="请选择证件类型"
			@close="showCid = false"
			@select="cidSelect"
			round="14"
		></u-action-sheet>
		<u-action-sheet
			:show="showtype"
			:actions="actionsType"
			title="请选择选手类型"
			@close="showtype = false"
			@select="typeSelect"
			round="14"
		/>
		<u-action-sheet
			:show="showSex"
			:actions="actionsSex"
			title="请选择选手性别"
			@close="showSex = false"
			@select="sexSelect"
			round="14"
		></u-action-sheet>
		<u-action-sheet
			:show="showTrans"
			:actions="actionsTrans"
			title="是否需要城际摆渡车"
			@close="showTrans = false"
			@select="transSelect"
			round="14"
		></u-action-sheet>
	</view>
</template>

<script>
const app = getApp()
import CustomPicker from '@/components/customPicker.vue'
export default {
	components: { CustomPicker },
	data() {
		return {
			id: '',
			detailInfo: {},
			forms: {
				name: '',
				mobile: '',
				type: '',
				type_name: '',
				cid: '',
				cid_name: '',
				cno: '',
				sex: '',
				sex_name: '',
				checked: false,
				country: '',
				born: '',
				age: '',
				blood: '',
				clothes: '',
				province: '',
				city: '',
				region: '',
				address: '',
				contact: '',
				telephone: '',
				ferrybus: '',
				ferrybus_name: '',
				ferrybuscity: '',
				postProvince: '',
				postCity: '',
				postAddress: '',
				postName: '',
				postTel: '',
				checkbox: true,
				customerFieldsVal: [] // 自定义报名字段值
			},
			rules: {
				name: {
					type: 'string',
					required: true,
					message: '请填写姓名',
					trigger: ['blur', 'change']
				},
				type_name: {
					type: 'string',
					required: true,
					message: '请选择',
					trigger: ['blur', 'change']
				},
				cid_name: {
					type: 'string',
					required: true,
					message: '请选择',
					trigger: ['blur', 'change']
				},
				cno: [
					{
						type: 'string',
						required: true,
						message: '请填证件号码',
						trigger: ['blur', 'change']
					},
					{
						validator: (rule, value, callback) => {
							return this.forms.cid == 2 || uni.$u.test.idCard(value)
						},
						message: '格式不正确',
						trigger: ['change', 'blur']
					}
				],
				mobile: [
					{
						type: 'string',
						required: true,
						message: '请填手机号码',
						trigger: ['blur', 'change']
					},
					{
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							// 返回true表示校验通过，返回false表示不通过
							// uni.$u.test.mobile()就是返回true或者false的
							return uni.$u.test.mobile(value)
						},
						message: '手机号码不正确',
						trigger: ['change', 'blur']
					}
				],
				sex_name: {
					type: 'string',
					required: true,
					message: '请选择',
					trigger: ['blur', 'change']
				},
				country: {
					type: 'string',
					required: true,
					message: '请选择',
					trigger: ['blur', 'change']
				},
				postTel: [
					{
						validator: (rule, value, callback) => {
							return !value || uni.$u.test.mobile(value)
						},
						message: '手机号码格式不正确',
						trigger: ['change', 'blur']
					}
				],
				born: {
					type: 'string',
					required: true,
					message: '请选择生日',
					trigger: ['blur', 'change']
				},
				age: {
					required: true,
					message: '请填写年龄',
					trigger: ['blur', 'change']
				},
				blood: {
					type: 'string',
					required: true,
					message: '请选择血型',
					trigger: ['blur', 'change']
				},
				clothes: {
					type: 'string',
					required: true,
					message: '请选择衣服尺码',
					trigger: ['blur', 'change']
				},
				province: {
					type: 'string',
					required: true,
					message: '请选择居住地省份',
					trigger: ['blur', 'change']
				},
				city: {
					type: 'string',
					required: true,
					message: '请选择居住地城市',
					trigger: ['blur', 'change']
				},
				region: {
					type: 'string',
					required: true,
					message: '请选择居住地区县',
					trigger: ['blur', 'change']
				},
				address: {
					type: 'string',
					required: true,
					message: '请填写详细居住地址',
					trigger: ['blur', 'change']
				},
				contact: {
					type: 'string',
					required: true,
					message: '请填写紧急联系人姓名',
					trigger: ['blur', 'change']
				},
				telephone: [
					{
						type: 'string',
						required: true,
						message: '请填写紧急联系电话',
						trigger: ['blur', 'change']
					},
					{
						validator: (rule, value, callback) => {
							return uni.$u.test.mobile(value)
						},
						message: '手机号码不正确',
						trigger: ['change', 'blur']
					}
				]
			},
			showTrans: false,
			actionsTrans: [
				{ name: '需要摆渡服务', id: 1 },
				{ name: '不需要摆渡服务', id: 0 }
			],
			show: false,
			showCountry: false,
			actionsCountry: [],
			defaultIndex: 0,
			showBlood: false,
			actionsBlood: [['A型', 'B型', 'O型', 'AB型', 'RH型']],
			showBirthday: false,
			minDate: new Date('1950-01-01').getTime(),
			birthday: Number(new Date()),
			showClothes: false,
			actionsClothes: [['S', 'M', 'L', 'XL', '2XL', '3XL', '4XL']],
			showProvince: false,
			actionsProvince: [],
			showCity: false,
			actionsCity: [],
			showRegion: false,
			actionsRegion: [],
			showPostProvince: false,
			showPostCity: false,
			actionsPostCity: [],
			showPostRegion: false,
			actionsPostRegion: [],
			actions: [
				{ name: '身份证', id: 1 },
				{ name: '护照', id: 2 }
			],
			showCid: false,
			actionsType: [
				{ name: '成人', id: 1 },
				{ name: '儿童', id: 2 }
			],
			typeOptions: [],
			showtype: false,
			actionsSex: [
				{ name: '男', id: 1 },
				{ name: '女', id: 2 }
			],
			showSex: false,
			//hiddenField: [],			// 作废隐藏字段 "hiddenField" 了啊。。。。。。
			isContact: 0, // 是否显示紧急联系人
			isContactMust: 0, // 紧急联系人是否必填
			isPalyerAddr: 0, // 是否显示选手区域地址
			isPalyerAddrMust: 0, // 选手区域地址是否必填
			isPostAddr: 0, // 是否显示选手收货地址
			isPostAddrMust: 0, // 选手收货地址是否必填
			raceId: 0, // 赛事ID
			customerFields: [], // 自定义报名字段啊。。。。。。
			customerFieldsPicker: [], // 自定义报名字段Picker的选项列表
			customerFieldsLabels: [], // 自定义报名字段Picker的选项文本
			customerFieldsIndex: [] // 自定义报名字段Picker的选项索引
		}
	},
	async onReady() {
		//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
		this.$refs.uForm.setRules(this.rules)
		this.getCountry()
		// 获取城市列表
		const res = await app.getRegion()
		this.actionsProvince = [res]
		// 获取自定义报名字段啊。。。。。。
		this.getCustomerFields(this.raceId)
	},
	onLoad(options) {
		const eventChannel = this.getOpenerEventChannel()
		if (!eventChannel) return
		eventChannel.on('signEvent', (data) => {
			// is_free_trans  0否1是，默认0
			this.detailInfo = data
			this.raceId = data.race_id // 赛事Id
			this.isContact = data.isContact // 是否显示紧急联系人
			this.isContactMust = data.isContactMust // 紧急联系人是否必填
			this.isPalyerAddr = data.isPalyerAddr // 是否显示选手区域地址
			this.isPalyerAddrMust = data.isPalyerAddrMust // 选手区域地址是否必填
			this.isPostAddr = data.isPostAddr // 是否显示选手收货地址
			this.isPostAddrMust = data.isPostAddrMust // 选手收货地址是否必填
			const { hiddenField, ...params } = data
			//this.hiddenField = hiddenField
			//hiddenField.forEach((key) => {
			//	delete this.rules[key]
			//})
			this.forms = {
				...this.forms,
				...params,
				type_name: data.type ? (data.type == 1 ? '成人' : '儿童') : '',
				cid_name: data.cid ? (data.cid == 1 ? '身份证' : '护照') : '',
				sex_name: data.sex ? (data.sex == 1 ? '男' : '女') : '',
				ferrybus: data.isFreeTrans == 0 ? 0 : '',
				ferrybus_name:
					data.ferrybus === 1 ? '需要摆渡服务' : data.ferrybus === 0 ? '不需要摆渡服务' : ''
			}
		})
	},
	methods: {
		// 获取自定义报名字段啊
		getCustomerFields(id) {
			/* prettier-ignore */
			this.$https( false, 'get', {
				url: '/race/race/field/' + id,
				data: {}
			},(res) => {
				this.customerFields = res.data
				this.customerFields.forEach((item, index) => {
					if(parseInt(item.type) == 2){
						let pickerArray = item.option.split(',')
						this.customerFieldsPicker[item.id] = pickerArray
					}
					if(item.isMust == 1 && !this.rules[item.key]){
						this.rules[item.key] = {
							type: 'string',
							required: true,
							message: `请${item.type === 2?'选择':'输入'}${item.name}`,
							trigger: ['blur', 'change']
						}
					}
				})
			})
			/* prettier-ignore */
		},
		/*
		getDetailInfo() {
			// prettier-ignore
			this.$https( true, 'post', {
				url: '/Home/ServerOrder/getInfo',
				data: {
					token: uni.getStorageSync('token'),
					id: this.id
				}
			},(res) => {
				this.detailInfo = res.data
				this.forms = res.data.info[0]
			})
			// prettier-ignore
		},
		*/
		getCountry() {
			/* prettier-ignore */
			this.$https( false, 'get', {
				url: '/race/common/country',
				data: {}
			},(res) => {
				this.actionsCountry = [res.data]
			})
			/* prettier-ignore */
		},
		// 是否需要摆渡车选择
		cidSelect(e) {
			this.forms.ferrybus_name = e.name
			this.forms.ferrybus = e.id
			this.$refs.uForm.validateField('ferrybus_name')
		},

		onSubmit() {
			this.$refs.uForm
				.validate()
				.then(() => {
					console.log(this.forms)
					if (!this.forms.checkbox) {
						uni.$u.toast('阅读并同意内容！')
						return
					}
					const eventChannel = this.getOpenerEventChannel()
					this.forms.sign = true
					eventChannel.emit('acceptData', this.forms)
					uni.navigateBack()
				})
				.catch((err) => {
					console.log(err)
					uni.$u.toast('请完善信息后提交！')
				})
		},
		onCountryShow() {
			this.defaultIndex = this.actionsCountry[0].findIndex((item) => {
				return this.forms.country ? item.cname === this.forms.country : item.cname === '中国'
			})
			this.showCountry = true
		},
		countrySelect(e) {
			console.log(e)
			this.forms.country = e.value[0].cname
			this.showCountry = false
			this.$refs.uForm.validateField('country')
		},
		bloodComfirm(e) {
			console.log(e)
			this.forms.blood = e.value[0]
			this.showBlood = false
			this.$refs.uForm.validateField('blood')
		},
		birthdayConfirm(e) {
			console.log(e)
			this.showBirthday = false
			this.birthday = e.value
			this.forms.born = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
			this.$refs.uForm.validateField('born')
		},
		clothesComfirm(e) {
			console.log(e)
			this.forms.clothes = e.value[0]
			this.showClothes = false
			this.$refs.uForm.validateField('clothes')
		},
		async provinceComfirm(e) {
			console.log(e)
			if (e.value[0].name !== this.forms.province) {
				this.forms.province = e.value[0].name
				this.forms.city = ''
				this.forms.region = ''
				const res = await app.getRegion(e.value[0].id)
				this.actionsCity = [res]
			}
			this.showProvince = false
			this.$refs.uForm.validateField('province')
		},
		async cityComfirm(e) {
			console.log(e)
			if (e.value[0].name !== this.forms.city) {
				this.forms.city = e.value[0].name
				this.forms.region = ''

				const res = await app.getRegion(e.value[0].id)
				this.actionsRegion = [res]
			}

			this.showCity = false
			this.$refs.uForm.validateField('city')
		},
		regionComfirm(e) {
			this.forms.region = e.value[0].name
			this.showRegion = false
			this.$refs.uForm.validateField('region')
		},

		async postProvinceComfirm(e) {
			console.log(e)
			if (e.value[0].name !== this.forms.postProvince) {
				this.forms.postProvince = e.value[0].name
				this.forms.postCity = ''
				this.forms.postRegion = ''
				const res = await app.getRegion(e.value[0].id)
				this.actionsPostCity = [res]
			}
			this.showPostProvince = false
			this.$refs.uForm.validateField('postProvince')
		},
		async postCityComfirm(e) {
			console.log(e)
			if (e.value[0].name !== this.forms.postCity) {
				this.forms.postCity = e.value[0].name
				this.forms.postRegion = ''

				const res = await app.getRegion(e.value[0].id)
				this.actionsPostRegion = [res]
			}

			this.showPostCity = false
			this.$refs.uForm.validateField('postCity')
		},
		postRegionComfirm(e) {
			this.forms.postRegion = e.value[0].name
			this.showPostRegion = false
			this.$refs.uForm.validateField('postRegion')
		},
		sexSelect(e) {
			console.log(e)
			this.forms.sex_name = e.name
			this.forms.sex = e.id
			this.$refs.uForm.validateField('sex_name')
		},
		cidSelect(e) {
			this.forms.cid_name = e.name
			this.forms.cid = e.id
			this.$refs.uForm.validateField('cid_name')
		},
		// 选手类型选择
		typeSelect(e) {
			this.forms.type = e.id
			this.forms.type_name = e.name
			this.$refs.uForm.validateField('type_name')
		},
		// 是否需要摆渡车
		transSelect(e) {
			this.forms.ferrybus = e.id
			this.forms.ferrybus_name = e.name
			this.$refs.uForm.validateField('ferrybus_name')
		},
		cidToAge() {
			const idCard = this.forms.cno
			const regx = this.forms.cid == 1 && uni.$u.test.idCard(idCard)
			if (!regx) return

			// 1. 计算年龄
			const birthStr = idCard.substr(6, 8)
			const birthYear = parseInt(birthStr.substr(0, 4))
			const birthMonth = parseInt(birthStr.substr(4, 2)) - 1
			const birthDay = parseInt(birthStr.substr(6, 2))

			const today = new Date()
			const birthDate = new Date(birthYear, birthMonth, birthDay)

			let age = today.getFullYear() - birthDate.getFullYear()
			if (
				today.getMonth() < birthMonth ||
				(today.getMonth() === birthMonth && today.getDate() < birthDay)
			) {
				age--
			}

			// 2. 判断性别（第17位奇数为男，偶数为女）
			const genderCode = parseInt(idCard.charAt(16))
			const gender = genderCode % 2 === 1 ? '男' : '女'

			const result = {
				age: age,
				gender: gender,
				birthday: `${birthYear}-${String(birthMonth + 1).padStart(2, '0')}-${String(
					birthDay
				).padStart(2, '0')}`
			}
			this.forms.age = String(age)
			this.forms.sex = gender === '男' ? 1 : 2
			this.forms.sex_name = gender
			this.forms.born = this.birthday = result.birthday
			this.forms.type_name = age > 13 ? '成人' : '儿童'
			this.forms.type = age > 13 ? 1 : 2
		},
		// 自定义报名字段选择框 change 事件
		handleCustomerFieldsPickerChange(e, id) {
			let index = e.detail.value
			let val = this.customerFieldsPicker[id][index]
			this.$set(this.customerFieldsLabels, id, val)
			this.saveCustomerFieldsData(id, val)
		},
		// 自定义报名字段输入框 change 事件
		handleCustomerFieldsInputChange(val, item) {
			this.saveCustomerFieldsData(item.id, val)
		},
		// 自定义报名字段提交数据，考虑重复问题
		saveCustomerFieldsData(id, val) {
			let isExists = false
			let data = { id: id, val: val }
			this.customerFields.forEach((item, index) => {
				// 替换旧的
				if (item.id === id) {
					isExists = true
					this.forms.customerFieldsVal[index] = data
					this.forms[item.key] = val
					this.$refs.uForm.validateField([item.key])
				}
			})
			// 添加新的
			if (isExists == false) {
				this.forms.customerFieldsVal.push(data)
			}
			this.$forceUpdate()
		}
	}
}
</script>
<style lang="scss" scoped>
.content {
	min-height: 100vh;
	overflow-x: hidden;
	padding: 0 26rpx 130rpx;
	width: calc(100% - 52rpx);
	&-main {
		margin: 20rpx 0;
		background-color: #fff;
		border-radius: 12rpx;
		padding: 20rpx 26rpx;
		&-tlt {
			font-size: 28rpx;
			color: #898989;
			border-bottom: 1px solid #e9e9e9;
			display: block;
			padding-bottom: 18rpx;
			&:before {
				display: inline-block;
				content: '';
				width: 8rpx;
				height: 30rpx;
				float: left;
				margin: 4rpx 10rpx 0;
				background-color: #0071c5;
			}
		}
	}
}
button::after {
	border: 0 none;
}
.footer {
	width: calc(100% - 48rpx);
	padding: 0 24rpx;
	height: 120rpx;
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 9;
	border-top: 1px solid #e5e5e5;
	&-btn {
		width: 684rpx;
		height: 82rpx;
		// background-color: #0071c5;
		// border: 1px solid #0071c5;
		border-radius: 16rpx;
		font-size: 30rpx;
		color: #fff;
		margin: 0;
	}
}
::v-deep {
	.content-main .u-form {
		margin: 14rpx 4rpx;
	}
	.content-main .u-input {
		background-color: #eee;
		font-size: 28rpx;
		padding: 10rpx 20rpx !important;
		display: block;
		margin-top: 20rpx;
		.input-placeholder {
			font-size: 28rpx;
			color: #bbb;
		}
	}
	.u-form-item__body__left {
		font-weight: normal;
		color: #333 !important;
		font-size: 28rpx !important;
		margin-left: 20rpx;
	}
	.u-form-item__body {
		display: block;
		&__right__content__icon {
			background-color: #eee;
		}
	}
	.u-form-item__body__right__message {
		margin-left: 14rpx !important;
	}
	.u-action-sheet {
		max-height: 80vh;
	}
	.mode .u-cell__body {
		padding: 10rpx 0;
		width: 100%;
	}
	.mode .u-checkbox {
		width: 100%;
		line-height: 40rpx;
	}
}
</style>
